<template>
  <div id="app">
    <LoadingSpinner v-if="loading" />
    <router-view v-slot="{ Component }">
      <transition name="fade" mode="out-in">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import LoadingSpinner from '@/components/LoadingSpinner.vue'

const loading = ref(true)

onMounted(() => {
  // 模拟资源加载
  setTimeout(() => {
    loading.value = false
  }, 1000)
})
</script>

<style>
#app {
  height: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

:root {
  --menu-bg-color: #304156;
  --menu-text-color: #bfcbd9;
  --menu-active-text-color: var(--el-color-primary);
}
</style> 